<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content" >
			<navigator :url="'/pages/preview/preview?id='+itme._id" v-for="itme in classList" 
			class="item"
			:key="itme._id"
			
			>
				<image :src="itme.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-srea-inset-bottom"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad,onReachBottom,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
import { apiGetClassList,apiUserWallList } from '../../api/api';
	const classList = ref([]);
	const noData = ref(false)
	
	// 定义data参数
	const queryParams = {
		pageNum:1,
		pageSize:12
	}
	
	let pageNamer;
	onLoad((e)=>{
		// console.log(e);
		let {id=null,name=null,type=null} = e;
		
		if(type){
			queryParams.type = type;
		}
		if(id){
			queryParams.classid = id;
		}
		
		
		// console.log(id,name);
		pageNamer = name
		uni.setNavigationBarTitle({
			title:pageNamer
		})
		
		getClassList();
	})
	
	onReachBottom(()=>{
		if(noData.value) return;
		queryParams.pageNum++;
		getClassList();
	})
	
	
	const getClassList = async ()=>{
		
		let res;
		if(queryParams.classid){
			 res = await apiGetClassList(queryParams)
		}
		else if(queryParams.type){
			 res = await apiUserWallList(queryParams)
		}
		
		classList.value =[...classList.value,...res.data] ;
		
		if(queryParams.pageSize > res.data.length){
			noData.value = true
		}
		uni.setStorageSync("storgClassList",classList.value );
		
		// console.log(res);
	}
	// 分享
	onShareAppMessage((e)=>{
		return {
			title:'咸虾米壁纸'+pageNamer,
			path:"/pages/classlist/classlist?id="+queryParams.classid + "&name=" +pageNamer
		}
	})
	onShareTimeline(()=>{
		return {
			title:'咸虾米壁纸'+pageNamer,
			query:"id="+queryParams.classid + "&name=" +pageNamer
			// imageUrl:bannerList.value[0].pacurl
		}
	})
	
</script>

<style lang="scss" scoped>
	.classlist{
		.content{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap:5rpx;
			padding: 5px;
			.item{
				height: 440rpx;
				image{
					width: 100%;
					height: 100%;
					display: block;
					
				}
			}
		}
	}
</style>
